// 遮罩层
.mask{
    background-color: #1592CC ;
    div{
        color: white;
        font-size: 120px;
        font-weight: bold;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}
// 继续 结束按钮
.btn{
    bottom: 0px;
    left: 56px;
    visibility: hidden;
    // margin-top: 476px;
    justify-content: space-around;
    .circle{
        width: 90px;
        height: 90px;
        border-radius: 50%;
        color: white;
        display: inline-block;
        display: flex;
        align-items: center;
        span{
            font-size: 14px;
        }
        .iconfont{
                font-size: 30px;
                margin-top: 15px;
            }
        &#continueBtn{
            background-color: #79f0c2;
            margin-right: 30px;
        }
        &#endBtn{
            background-color: #ff6060;
            margin-left: 20px;
        }
    }
}
.content{
    display: none;
}
// 主体内容
main{
    background-color: #1592CC;
    color: white;
    opacity: 0.7;
    padding: 20px;
    // 顶部设置
    .top{
        justify-content: space-between;
        .left{
            span{
                color: rgba(170, 217, 247, 100);
                font-size: 14px;
            };
            p{
                font-size: 20px;
            }
        }
        .right{
            .iconfont{
                font-size: 26px;
                margin-left: 20px;
            }
        }
    }
    // 中间99.99公里
    .distance{
        span{
            margin-left: 35px;
            display: inline-block;
            font-size: 80px;
            margin-top: 30px;
        }
    }
    // GPS地图
    .map{
        margin-top: 60px;
        justify-content: space-between;
        .text{
            line-height: 35px;
        }
        .line{
            width: 70px;
            height: 1px;
            line-height:40px ;
            border-top: 1px dotted white;
            top: 15px;
        }
        .iconfont{
            font-size: 35px;
        }
    }
    // 数据 
    .data{
        margin-top: 70px;
        div{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            .special{
                margin-top: 46px;
            }
            .num{
                margin-top: 18px;
                font-size: 22px;
                &.line{
                    margin-top: 16px;
                }
            }
        }
        .iconfont{
            font-size: 40px;
            &.icon-speed{
                font-size: 60px;
                top: -13px;
            }
        }
    }
 
    // 暂停操作
    .operate{
        flex: 1;
        align-items: center;
        justify-content: space-around;
        margin-top: 57px;
        .iconfont{
            font-size: 30px;
            &.icon-weixin{
                visibility: hidden;
            }
            &.icon-pause2{
                margin-top: 10px;
            }
        }
        .pause{
            width: 90px;
            height: 90px;
            // line-height: 70px;
            border-radius: 50%;
            color: #1592CC;
            background-color: white;
        }
    }
}
